<template>
  <div class="pdf-wrap disf dirc" v-loading="loading" element-loading-text="加载中...">
    <div class="flex1 pdf-preview">
      <div
        id="page-view"
        :style="{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: `translate(-50%, -50%) scale(${state.scale})`,
          width: '100%',
          height: `${pageHeight}`,
        }"
      >
        <vue-pdf-embed
          :source="state.source"
          :page="state.pageNum"
          @loaded="onPdfLoaded"
          @loading-failed="onLoadingFailed"
        />
      </div>
    </div>

    <div class="page-tool">
      <div class="page-tool-item" :class="{ disabeld: state.pageNum == 1 }" @click="lastPage">
        上一页
      </div>
      <div
        class="page-tool-item"
        :class="{ disabeld: state.pageNum == state.numPages }"
        @click="nextPage"
      >
        下一页
      </div>
      <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
      <div class="page-tool-item" :class="{ disabeld: state.scale >= 2 }" @click="pageZoomOut">
        放大
      </div>
      <div class="page-tool-item" :class="{ disabeld: state.scale <= 0.5 }" @click="pageZoomIn">
        缩小
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import VuePdfEmbed from "vue-pdf-embed";

const props = defineProps({
  pdfUrl: {
    type: String,
    required: true,
  },
});

const loading = ref(false);
const pageHeight = ref("100%");
const state = reactive({
  source: "", //预览pdf文件地址
  pageNum: 1, //当前页面
  scale: 1, // 缩放比例
  numPages: 0, // 总页数
});

watch(
  () => props.pdfUrl,
  (val) => {
    loading.value = true;
    state.source = val;
  },
  {
    deep: true,
    immediate: true,
  }
);

function lastPage() {
  if (state.pageNum > 1) {
    state.pageNum -= 1;
  }
}

function nextPage() {
  if (state.pageNum < state.numPages) {
    state.pageNum += 1;
  }
}

function pageZoomOut() {
  if (state.scale < 2) {
    state.scale += 0.1;
    pageHeight.value = parseInt(pageHeight.value) - 5.0 + "%";
  }
}

function pageZoomIn() {
  if (state.scale > 0.5) {
    state.scale -= 0.1;
    pageHeight.value = parseInt(pageHeight.value) + 5.0 + "%";
  }
}

function onPdfLoaded(pdf: { numPages: number }) {
  loading.value = false;
  state.numPages = pdf.numPages;
}

function onLoadingFailed() {
  loading.value = false;
}
</script>

<style lang="scss" scoped>
.pdf-wrap {
  height: 65vh;
}
.pdf-preview {
  position: relative;
  padding: 20px 0 50px;
  box-sizing: border-box;
  background-color: #e9e9e9;
  overflow-y: auto;
}

.vue-pdf-embed {
  text-align: center;
  width: 90%;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-tool {
  margin-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(66, 66, 66);
  color: white;
  border-radius: 19px;
  z-index: 100;
  margin-left: 50%;
  transform: translateX(-50%);
}

.page-tool-item {
  padding: 8px 15px;
  padding-left: 10px;
  cursor: pointer;
  &:hover {
    opacity: 0.6;
  }
  &.disabeld {
    cursor: not-allowed;
    opacity: 0.4;
  }
}
</style>
